<template>
  <div class='container'>
    <el-card style="margin:15px">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-button type="success" class="el-icon-edit cyjbtn">新增试题</el-button>
          </div>
        </el-col>
      </el-row>
          <!-- form表单部分 -->
      <el-form ref="form" :model="listData" label-width="80px" style="margin-bottom:20px">
        <!-- 第一层 -->
        <el-row>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="学科">
                <el-select
                v-model="listData.subjectID"
                 placeholder="请选择"
                 style="width:100%"
                 @change='changeDiscipline'>
                  <el-option
                  v-for="item in list"
                  :label="item.label"
                  :value="item.value"
                  :key='item.value'></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <el-form-item label="二级目录">
                <el-select
                v-model="listData.catalogID"
                placeholder="请选择"
                style="width:100%">
                  <el-option
                   v-for="itemt in twoList"
                    :key='itemt.id'
                    :label="itemt.directoryName"
                    :value="itemt.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="标签">
                <el-select v-model="listData.tags" placeholder="请选择" style="width:100%">
                  <el-option
                  v-for="itemL in labelList"
                  :key='itemL.id'
                  :label="itemL.tagName"
                  :value="itemL.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <el-form-item label="关键字">
                <el-input v-model="listData.keyword"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <!-- 第二层 -->
        <el-row>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="试题类型">
                <el-select v-model="listData.questionType" placeholder="请选择" style="width:100%">
                  <el-option
                  v-for="obj in questionType"
                  :key='obj.value'
                  :label="obj.label"
                  :value="obj.value"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <el-form-item label="难度">
                <el-select v-model="listData.difficulty" placeholder="请选择" style="width:100%">
                  <el-option
                  v-for="objT in difficulty"
                  :key='objT.value'
                  :label="objT.label"
                  :value="objT.value"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="方向">
                <el-select v-model="listData.direction" placeholder="请选择" style="width:100%">
                  <el-option
                  v-for="objTr in direction"
                  :key='objTr'
                  :label="objTr"
                  :value="objTr"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <el-form-item label="录入人">
                <el-select v-model="listData.creatorID" placeholder="请选择" style="width:100%">
                  <el-option
                  v-for="res in entryPeople"
                  :key='res.id'
                  :label="res.username"
                  :value="res.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <!-- 第三层 -->
        <el-row>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="题目备注">
                <el-input v-model="listData.remarks"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <el-form-item label="企业简称">
                <el-input v-model="listData.shortName"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="城市">
                <el-select
                v-model="listData.province"
                placeholder="请选择"
                style="width:48%;margin-right:2%"
                @change="changeProvinces">
                  <el-option
                  v-for="item in provinces"
                  :key='item'
                  :label="item"
                  :value="item"></el-option>
                </el-select>
                <el-select
                v-model="listData.city"
                placeholder="请选择"
                style="width:50%">
                  <el-option
                  v-for="city in citys"
                  :key='city'
                  :label="city"
                  :value="city"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <el-form-item style="float:right">
                <el-button @click="resetForm">清除</el-button>
                <el-button type="primary" @click="clickSearch">搜索</el-button>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
       <!-- 第二大表格部分 -->
       <choice-card
        :tableData='tableData'
        @openDialog='openDialog'
        @removeTitle='removeTitle'
        @firstChkType='firstChkType'
        @RefreshThePage='RefreshThePage'
        @secondChkType='secondChkType'
        @thirdChkType='thirdChkType'
        @fourthChkType='fourthChkType'/>
       <!-- 分页器 -->
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :total="total">
        </el-pagination>
        <!-- 审核对话框 -->
        <el-dialog
          title="题目审核"
          :visible.sync="dialogVisible"
          width="30%"
          @close='closeDialog'>
            <el-radio v-model="listData.chkState" label="2">通过</el-radio>
            <el-radio v-model="listData.chkState" label="3">拒绝</el-radio>
          <el-input
          style="margin-top:20px"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="listData.chkRemarks"></el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="sendChkState">确 定</el-button>
          </span>
        </el-dialog>
    </el-card>
  </div>
</template>

<script>
import choiceCard from '../components/choiceCard.vue' // 表格组件的引入
import { simple as getDisciplineList } from '@/api/hmmm/subjects.js'
import { list as twoDisciplineList } from '@/api/hmmm/directorys.js'
import { list as labelList } from '@/api/hmmm/tags.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js' // 引入试题类型,难度,方向
import { simple as entryPeople } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js' // 引入城市数据
import { choice as searchList, choiceCheck } from '@/api/hmmm/questions.js'
export default {
  components: { choiceCard },
  name: 'questions-choice', // 精选题库组件名字
  data () {
    return {
      dialogVisible: false, // 题目审核对话框开关
      total: 0, // 页码数据
      list: [], // 学科列表数据
      twoList: [], // 二级目录数据
      labelList: [], // 标签列表数据
      questionType: [], // 试题类型数据
      difficulty: [], // 试题难度数据
      direction: [], // 试题方向数据
      provinces: [], // 城市数据
      citys: [], // 城市地区数据
      entryPeople: [], // 收录人数据
      listData: { // form表单数据列表
        subjectID: '', // 学科id
        catalogID: '', // 二级目录的id
        tags: '', // 标签的id
        keyword: '', // 关键字输入框数据
        questionType: '', // 试题类型数据
        difficulty: '', // 试题难度数据
        direction: '', // 试题方向数据
        creatorID: '', // 收录人数据
        remarks: '', // 题目备注数据
        shortName: '', // 企业简称数据
        province: '', // 城市
        city: '', // 城市地区
        chkRemarks: '', // 审核意见数据
        chkState: '', // 审核状态数据
        id: '' // 要操作的数据id
      },
      tableData: [], // 第二部分table表格数据
      screenTableData: [], // 筛选用表格数据
      chkStateId: '' // 要审核的数据的id
    }
  },
  async created () {
    const { data } = await getDisciplineList() // 发送获取学科列表请求
    // console.log(data)
    this.list = data // 赋值列表数据
    const res = await entryPeople() // 发送获取收录人信息请求
    this.entryPeople = res.data // 赋值收录人数据
    this.questionType = questionType // 赋值试题类型
    this.difficulty = difficulty // 赋值试题难度
    this.direction = direction // 赋值试题方向
    this.provinces = provinces() // 赋值城市数据
    this.clickSearch() // 刷新页面触发获取一次表格数据
  },
  methods: {
    changeDiscipline () { // 学科下拉数据变化事件
      Promise.all([twoDisciplineList({ subjectID: this.listData.subjectID }), labelList({ subjectID: this.listData.subjectID })]).then(values => {
        // console.log(values)
        this.twoList = values[0].data.items // 二级目录数据
        this.labelList = values[1].data.items // 标签数据
      })
    },
    changeProvinces () { // 切换了城市事件
      this.citys = citys(this.listData.province) // 调用函数匹配得到对应的城市区数据
    },
    resetForm () { // 重置form表单事件
      this.$refs.form.resetFields() // 重置表单
      this.listData = { // form表单数据列表
        subjectID: '', // 学科id
        catalogID: '', // 二级目录的id
        tags: '', // 标签的id
        keyword: '', // 关键字输入框数据
        questionType: '', // 试题类型数据
        difficulty: '', // 试题难度数据
        direction: '', // 试题方向数据
        creatorID: '', // 收录人数据
        remarks: '', // 题目备注数据
        shortName: '', // 企业简称数据
        province: '', // 城市
        city: '' // 城市地区
      }
    },
    async clickSearch () { // 点击搜索事件
      const { data } = await searchList() // 依据表格内容发送搜索请求
      // console.log(data)
      this.tableData = data.items // 表格数据赋值
      this.screenTableData = data.items // 用于表格筛选的数据
    },
    removeTitle (id) { // 子组件删除表格对应数据事件
    // 将数组中与需要删除的数据id不同的数据筛选出来更新表格数据
      this.tableData = this.tableData.filter(item => item.id !== id)
    },
    RefreshThePage () {
      this.clickSearch() // 刷新页面触发获取一次表格数据
    },
    openDialog (id) { // 打开审核弹框
      this.chkStateId = id // 同时加入要审核的数据的id
      this.dialogVisible = true
    },
    closeDialog () { // 关闭审核弹框
      this.dialogVisible = false
    },
    async sendChkState () { // 发送审核事件
      this.listData.id = this.chkStateId
      const res = await choiceCheck(this.listData)
      console.log(res)
      this.dialogVisible = false // 关闭审核弹框
    },
    firstChkType () {
      this.clickSearch() // 重新获取一次表格数据
    },
    secondChkType () {
      this.tableData = this.screenTableData.filter(item => item.chkState === 0) // 筛选出数据中的待审核数据
      // console.log(this.tableData)
    },
    thirdChkType () {
      this.tableData = this.screenTableData.filter(item => item.chkState === 1) // 筛选出数据中的已审核数据
      // console.log(this.tableData)
    },
    fourthChkType () {
      this.tableData = this.screenTableData.filter(item => item.chkState === 2) // 筛选出数据中的拒绝数据
      // console.log(this.tableData)
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  .cyjbtn {
    float: right;
    margin-bottom: 15px;
  }
}
.el-pagination {
  float: right;
  margin: 20px 0;
}
</style>
